<template>
  <div>
    <input
      type="text"
      placehold="请输入id进行查询"
      v-model="inputValue"
      ref="input"
      @keyup="goSearch"
    />
    <!-- 这里v-show比v-if省性能 -->
    <div class="conten" v-show="isShow">
      <div
        class="contenlist"
        v-for="(item, index) in listData.list"
        :key="index"
      >
        <!-- <span>{{ item.id }}</span> -->
        <!-- <span>{{ item.name }}</span> -->
        <!-- <span>{{ item.time }}</span> -->
        <span v-html="item.id"></span>
        <span v-html="item.name"></span>
        <span v-html="item.time"></span>
      </div>

      <div v-if="listData.list.length == 0">没有搜索到内容</div>
    </div>
  </div>
  <div class="box" @mouseover="handleMouseOver">一个盒子移入次数{{ num }}</div>
</template>

<script setup>
import { reactive, ref } from 'vue'

let inputValue = ref('')
let isShow = ref(false)
let statu = ref(true)
const dataListData = reactive({
  dataList: [
    { id: '9527', name: '刘一', time: '2020-07-10' },
    { id: '95273', name: '刘一天', time: '2020-07-10' },
    { id: '95275', name: '刘一远', time: '2020-07-10' },
    { id: '95275', name: '刘刘远', time: '2020-07-10' },
    { id: '9528', name: '陈二', time: '2020-08-10' },
    { id: '9259', name: '张三', time: '2020-09-10' },
    { id: '9277', name: '李四', time: '2020-10-10' },
    { id: '1205', name: '王五', time: '2020-11-10' },
    { id: '1206', name: '赵六', time: '2020-12-10' },
    { id: '1307', name: '孙七', time: '2021-01-10' },
    { id: '1308', name: '周八', time: '2021-02-10' },
    { id: '1309', name: '吴九', time: '2021-03-10' },
    { id: '1300', name: '郑十', time: '2021-04-10' }
  ]
})
const listData = reactive({
  list: []
})

const search = () => {
  listData.list = []
  //   inputValue = this.$refs.input.value
  // 判断展示列表，如果输入了就展示没输入就不展示
  if (inputValue.value.length > 0) {
    isShow.value = true
  } else {
    isShow.value = false
  }

  dataListData.dataList.map(item => {
    // id、name、time去分别跟输入的值进行比较
    if (
      item.id.indexOf(inputValue.value) !== -1 ||
      item.name.indexOf(inputValue.value) > -1 ||
      item.time.indexOf(inputValue.value) > -1
    ) {
      // 将当前匹配到的值添加到list数组中
      // list.push(item); // 这里需要深拷贝 下面两种方法都可以

      listData.list.push(JSON.parse(JSON.stringify(item)))
      // list.push(_.cloneDeep(item)); // _.cloneDeep 需要下载lodash
    }
  })

  listData.list.map(item => {
    item.id = brightKeyword(item.id)
    item.name = brightKeyword(item.name)
    item.time = brightKeyword(item.time)
  })
}

const brightKeyword = val => {
  const keyword = inputValue.value
  if (val.indexOf(keyword) > -1) {
    // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
    // font标签 规定文本的尺寸、字体和颜色
    return val.replace(keyword, `<font color='tomato'">${keyword}</font>`)
  } else {
    return val
  }
}

const fnFouce = () => {
  statu.value = false
  search() // 调用写好的方法
  statu.value = true
  console.log('1111111111111111111111111111111111111')
}

// 防抖函数 debounce
// 在指定的单位时间，频繁触发事件，只执行最后一次
// 例如，王者荣耀的英雄回城，需要6秒回城，被打断后，则重新计时
// 使用场景：输入框、手机号、邮箱验证 输入检测
// 核心就是利用定时器setTimeout来实现
// 1、声明一个定时器变量
// 2、当每次触发事件时，先判断是否有定时器了，如果有定时器用clearTimeout清除以前的定时器
// 3、如果没有定时器则开启setTimeout定时器，然后存到刚刚声明的定时器变量里面
// 4、最后再定时器里面调用要执行的函数

const debounceFn = (fn, time) => {
  let timer
  return function () {
    if (timer) {
      clearTimeout(timer)
    }

    timer = setTimeout(() => {
      console.log('debounce-----------------')
      fn()
    }, time)
  }
}
// const goSearch = debounceFn(fnFouce, 400)

// 节流函数 throttle
// 在指定的单位时间，频繁触发事件，只执行一次
//  例如，王者荣耀的英雄技能冷却，期间无法继续释放技能
// 使用场景：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll事件
// 核心就是利用定时器setTimeout来实现
// 1、声明一个定时器变量
// 2、当每次触发事件时，先判断是否有定时器了，如果有定时器就不开启新定时器
// 3、如果没定时器则开启定时器，然后存到刚刚声明的定时器变量里面
// 4、在定时器里面调用执行函数，最后清空定时器
// 5、在settimeout中无法清除定时器的，因为定时器在运行，所以使用timer = null 而不是cleartimeout（timer）
let num = ref(0)
const throttleFn = (fn, time) => {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        console.log('throttle----------------')
        fn()
        timer = null // 这里不能用clearTimeout清除
      }, time)
    }
  }
}
const numFn = () => {
  num.value++
}
const handleMouseOver = throttleFn(numFn, 4000)
</script>

<style lang="scss" scoped>
.conten {
  margin-top: 10px;
  width: 300px;
  height: 400px;
  border: 1px solid pink;
  overflow-y: auto;
  .contenlist {
    padding: 20px;
    > span {
      padding-right: 10px;
    }
  }
}
.box {
  padding: 20px 20px;
  margin: 10px 10px;
  height: 500px;
  width: 500px;
  border: 2px solid salmon;
}
</style>
